<template>
    <div class="container">
        <div class="left">
            <div class="lt" :model="zjList">
                <Card style="background-color: #c8ebfb;height:200px" >
                    <div style="width: 40%;height: 150px;float: left">
                        <p style="text-align: center;font-size: 35px;margin-top: 28%;float: right">纳入资金</p>
                    </div>
                    <div style="width: 60%;height:150px;float: left">
                        <div style="width: 60%;height: 150px;float: left;font-size: 35px;text-align: center;margin-top: 18%">{{zjList}}</div>
                        <div style="width: 10%;height: 150px;float: left;font-size: 35px;text-align: center;margin-top: 18%">元</div>
                    </div>
                </Card>
            </div>
            <div class="lc">
                <div style="width: 100%;float: left;height:200px">
                    <Card  style="margin-top: 5px;background-color: orangered;height: 200px ">
                        <div style="width: 100%;height: 80px;font-size: 35px;text-align: center;color: white;padding-top: 5px" :model="dwList">单位总数
                            <span>{{dwListCount}}</span>
                            家
                        </div>
                        <div style="width: 100%;height: 80px;font-size: 35px;text-align: center;color: white;padding-top: 5px" :mode="dwwtList">存在问题单位
                            <span>{{dwwtListCount}}</span>
                            家
                        </div>
                    </Card>
                </div>
            </div>
            <div class="lb">
                <Card  style="margin-top: 15px;background-color: #ff9900;height: 200px ">
                    <div style="width: 100%;height: 80px;font-size: 35px;text-align: center;color: white;padding-top: 5px">涉及资金条数
                        <span>{{sjtsCount}}</span>
                        条
                    </div>
                    <div style="width: 100%;height: 80px;font-size: 35px;text-align: center;color: white;padding-top: 5px">涉及资金总数
                        <span>{{sjzjCount}}</span>
                        元
                    </div>
                </Card>
            </div>
        </div>
        <div class="right">
            <div class="rt">
                <div style="width: 100%;height: 400px;float: left">
                    <Card  style="height: 600px;width: 100%">
                        <div style="width: 85%;height: 580px;float: left" id="youliang"></div>
                    </Card>
                </div>
            </div>
            <div class="rb">
                <div style="width: 100%;height: 390px;float: left">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import { getCountNum, getCountProblemList, getCountTypeList, getCountList } from '@/api/user'

export default {

  name: 'basic-information',

  data () {
    return {
      zjList: 0,
      dwList: [],
      dwwtList: [],
      dwListCount: 0,
      dwwtListCount: 0,
      sjzjCount: 0,
      sjtsCount: 0
    }
  },

  props: {

  },

  components: {

  },

  computed: {

  },

  methods: {
    compare (property) {
      return function (a, b) {
        var value1 = a[property]
        var value2 = b[property]
        return value1 - value2
      }
    },
    async init () {
      getCountNum().then(ret => {
        this.zjList = ret.data.data[0].money
      })
      getCountProblemList().then(ret => {
        console.log(ret.data.data[0], '单位！！！！！！！！！！！！')
        this.dwwtListCount = ret.data.data[0].longSize
        this.dwListCount = ret.data.data[0].companyNumber
      })
      getCountList().then(ret => {
        console.log(ret.data.data, 'ret!!!!!!!!!')
        this.sjtsCount = ret.data.data.number
        this.sjzjCount = ret.data.data.money
      })
      getCountTypeList().then(ret => {
        let ylList = ret.data.data
        let qiyouList = []
        let chaiyouList = []
        for (let i = 0; i < ylList.length; i++) {
          if (ylList[i].type === '汽油') {
            qiyouList.push(ylList[i])
          }
        }
        qiyouList = qiyouList.sort(this.compare('business_date'))
        let qiyouNum = []
        let yearList = []
        for (let i = 0; i < qiyouList.length; i++) {
          qiyouNum.push(qiyouList[i].fuel)
          yearList.push(qiyouList[i].business_date)
        }
        for (let i = 0; i < ylList.length; i++) {
          if (ylList[i].type === '柴油') {
            chaiyouList.push(ylList[i])
          }
        }
        chaiyouList = chaiyouList.sort(this.compare('business_date'))
        let chaiyouNum = []
        for (let i = 0; i < chaiyouList.length; i++) {
          chaiyouNum.push(chaiyouList[i].fuel)
        }
        this.youliang(qiyouNum, chaiyouNum, yearList)
      })
    },
    youliang (qiyouNum, chaiyouNum, yearList) {
      let myChart = echarts.init(document.getElementById('youliang'))
      var posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
      ]

      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: echarts.util.reduce(posList, function (map, pos) {
            map[pos] = pos
            return map
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      }

      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          var labelOption = {
            normal: {
              rotate: app.config.rotate,
              align: app.config.align,
              verticalAlign: app.config.verticalAlign,
              position: app.config.position,
              distance: app.config.distance
            }
          }
          myChart.setOption({
            series: [{
              label: labelOption
            }, {
              label: labelOption
            }, {
              label: labelOption
            }, {
              label: labelOption
            }]
          })
        }
      }

      var labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
          name: {
            textBorderColor: '#fff'
          }
        }
      }

      let option = {
        title: {
          text: '油量使用统计',
          left: 'center',
          align: 'right'
        },
        color: ['#006699', '#e5323e'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['汽油', '柴油'],
          bottom: 12
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: yearList
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '汽油',
            type: 'bar',
            label: labelOption,
            data: qiyouNum
          },
          {
            name: '柴油',
            type: 'bar',
            label: labelOption,
            data: chaiyouNum
          }
        ]
      }

      myChart.setOption(option)
    }
  },

  watch: {

  },

  mounted () {
    this.init()
    this.youliang()
  }

}
</script>

<style scoped>
    .container{
        width: 100%;
        height: 600px;
        margin-top: 45px;
    }
    .left{
        width: 48%;
        height: 400px;
        float: left;
    }
    .right{
        width: 48%;
        height: 600px;
        float: left;
        margin-left: 3%;
    }
    .lt{
        width: 100%;
        height: 200px;
    }
    .lc{
        width: 100%;
        height: 200px;
        margin-top: 5px;
    }
    .lb{
        width: 100%;
        height: 200px;
        margin-top: 5px;
    }
    .rt{
        width: 100%;
        height: 300px;
    }
    .rb{
        width: 100%;
        height: 300px;
        margin-top: 25px;
    }
    .ivu-card {
        display: block;
        background: #fff;
        border-radius: 4px;
        font-size: 14px;
        position: relative;
        transition: all .2s ease-in-out;
        height: 180px;
    }
</style>
